<template>
  <div class="border-line card">
    <header-title title="房屋类资产类型占比" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getFLTJ } from '@/api/datacharts'
export default {
  components: {
    headerTitle,
    echartsView
  },
  created () {
    this.fetchData()
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    fetchData () {
      getFLTJ({
        Mode: 'FW'
      }).then((res) => {
        const echartData = res
        const total = echartData.reduce((a, b) => {
          return a + b.value
        }, 0)
        this.option = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true
          },
          legend: {
            width: '50%',
            orient: 'vertical',
            y: 'center', // 延Y轴居中
            right: 0,
            itemGap: 40,
            textStyle: {
              overflow: 'breakAll',
              fontSize: 14,
              rich: {
                name: {
                  align: 'left',
                  width: 90
                },
                percent: {
                  align: 'right',
                  width: 50
                }
              }
            },
            formatter: function (name) {
              const res = echartData.filter((v) => v.name === name)
              const percent = ((res[0].value * 100) / total).toFixed(2)
              return `{name|${name}}{percent|${percent}%}`
            }
          },
          series: [
            {
              name: '房屋类资产类型占比',
              type: 'pie',
              radius: ['45%', '60%'],
              avoidLabelOverlap: false,
              center: ['25%', '50%'],
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '24',
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: echartData
            }
          ]
        }
      })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 368px;
  &-content {
    margin-top: 20px;
  }
}
</style>
